<template>
	<view class="user-container">
		<custom-nav title="我的"></custom-nav>
		<view class="user-info">
			<view class="user-img" @click="goInfo">
				<img src="/schoolCube/static/img/logo.png" alt="">
			</view>
			<view class="user-name">{{userInfo.name}}</view>
		</view>
		<view class="app-info">
			<view class="phone">
				<view class="left">
					<img src="/schoolCube/static/svg/phone.svg" alt="" class="icon">
					<view class="title">联系方式</view>
				</view>
				<view class="content" @click="callPhone">
					<img src="/schoolCube/static/svg/right.svg" alt="" class="icon">
				</view>
			</view>
			<view class="version">
				<view class="left">
					<img src="/schoolCube/static/svg/bianji.svg" alt="" class="icon">
					<view class="title">版本号</view>
				</view>
				<view class="content">{{version}}</view>
			</view>
			<view class="about">
				<view class="left">
					<img src="/schoolCube/static/svg/aboutus.svg" alt="" class="icon">
					<view class="title">关于我们</view>
				</view>
				<view class="content" @click="goAbout">
					<img src="/schoolCube/static/svg/right.svg" alt="" class="icon">
				</view>
			</view>
		</view>
		<view class="button">
			<button type="primary" @click="goLogin">退出登录</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo, getPhone
	} from '@/requests/index.js'
	export default {
		data() {
			return {
				version: 'v1.0.0',
				about: '',
				phone: '',
				userInfo: {
					name: '',
				},
			}
		},
		methods: {
			async getUserInfo() {
				const phone = uni.getStorageSync('phone')
				const result = await getUserInfo({phone});
				const res = await getPhone();
				if (result.id) {
					this.userInfo.name = result.name;
				}
				this.phone = res;
			},
			callPhone() {
				const that = this;
				uni.showActionSheet({
					itemList: [that.phone],
					success: function(res) {
						if (!res.cancel) {
							uni.makePhoneCall({
								phoneNumber: that.phone,
								success: function() {
									console.log('拨打电话成功');
								},
								fail: function() {
									console.log('拨打电话失败');
								}
							});
						}
					},
					fail: function(err) {
						console.log('调用失败', err);
					}
				});
			},
			goAbout() {
				uni.navigateTo({
					url: '/pages/user/about'
				});
			},
			goLogin(){
				uni.reLaunch({
					url: '/pages/login/index'
				});
			},
			goInfo() {
				uni.navigateTo({
					url: '/pages/login/info'
				});
			},
		},
		mounted() {
			this.getUserInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.app-info>view {
		padding: 0 30rpx;
		height: 76rpx;
		line-height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		color: #333;

		.left,
		.content {
			display: flex;
			align-items: center;
		}

		.content {
			flex: 1;
			justify-content: flex-end;
		}

		.title {
			margin-left: 15rpx;
		}
	}

	.user-info {
		width: 100%;
		padding: 0 30rpx;
		height: 150rpx;
		display: flex;
		margin-bottom: 20rpx;

		.user-img {
			box-sizing: border-box;
			width: 106rpx;
			height: 106rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			img{
				width: 106rpx;
				border-radius: 50%;
			}
		}

		.user-name {
			margin-left: 30rpx;
			height: 106rpx;
			line-height: 106rpx;
			font-size: 36rpx;
		}
	}

	.icon {
		width: 36rpx;
		height: 36rpx;
	}
	.button{
		width: 100%;
		padding: 30rpx;
		position: absolute;
		bottom: 0;
		left: 0;
	}
</style>